<template>
  <div class="seeping_type">
    <!--机械化保洁监控部分-->
    <!-- <Row class="message check_box" v-model = "messageNum" style="padding-top:0px;">
      <div>机械化保洁监控：</div>
      <div>入网数：<span>{{messageNum.totailNum}}</span></div>
      <div>在线数：<span>{{messageNum.onlineNum}}</span></div>
      <div>离线数：<span>{{messageNum.offlineNum}}</span></div>
      <div>出车数：<span>{{messageNum.outVechileNum}}</span></div>
      <div>道路总数：<span>{{messageNum.totailRoadNum}}</span></div>
      <div>已作业道路：<span>{{messageNum.workedRoadNum}}</span></div>
      <div>作业完成率：<span v-cloak>{{messageNum | filterFun}}%</span></div>
    </Row> -->
    <!--作业类型-->
    <Row class="check_box">
      <Col span="2"><span>作业车间：</span></Col>
      <Col span="22">
        <RadioGroup v-model="type" v-for="(items, index) in worktypeobj" :key="index" name="1">
          <Radio :label="items.id">{{items.name}}</Radio>
        </RadioGroup>
      </Col>
    </Row>
    <!--作业模式-->
    <Row class="check_box" style="border-bottom:0px;">
      <Col span="2"><span>工作岗位：</span></Col>
      <Col span="22">
        <RadioGroup v-model="modes" v-for="(items, index) in worktypeobjs" :key="index" name="1">
          <Radio :label="items.id">{{items.name}}</Radio>
        </RadioGroup>
      </Col>
    </Row>
    <!--车辆图层部分-->
    <!-- <Row class="check_box" style="border-bottom:0px;">
      <Col span="2">车辆图层：</Col>
      <Col span="22">
        <CheckboxGroup class="horizontal_sy"  @on-change="depot">
          <Checkbox label="停车场"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup class="horizontal_sy"  @on-change="addwarters">
          <Checkbox label="加水点"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup class="horizontal_sy"  @on-change="suction">
          <Checkbox label="吸污点"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup class="horizontal_sy"  @on-change="sewage">
          <Checkbox label="排污点"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup  v-model="line_sy" @on-change="channel" class="horizontal_sy">
          <Checkbox label="路线" :disabled="disabled"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup class="horizontal_sy" v-model="zhuapai_sy"  @on-change="zhuapai">
          <Checkbox label="抓拍" :disabled="disabled1"></Checkbox>
        </CheckboxGroup>
        <CheckboxGroup v-model="local" class="horizontal_sy" @on-change="localcar">
          <Checkbox label="车辆位置"></Checkbox>
        </CheckboxGroup>
      </Col>
    </Row> -->
    <!--车辆信息列表-->
    <Row :class="{car_cont:isActive, flow: isSubShow}">
      <Spin size="large" fix v-show="loading">
        <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
        <div>正在加载中</div>
      </Spin>
      <div class="cont">
        <Row class="animatechange">
          <Card @click.prevent.native = "links">
            <div>
              <Row>
                <Col span="24">
                  <span style="font-weight:bold">王大</span>
                </Col>
                <Col span="24">
                  <span>岗位: <span style="color: blue">压缩车间</span></span>
                  <span>学历: <span style="color: blue">本科</span></span>                  
                </Col>
                <Col span="24">
                  <span style="font-size: 13px;color: #666;">年龄:<span style="color: #19be6b">22</span></span>
                  <span style="font-size: 13px;color: #666;">&nbsp;上岗时间：<span style="color: #19be6b">09:23分</span></span>
                </Col>
                <Col span="24" class="btnmsg">
                  <a href="javascript:;" @click.stop="gettraces(items.vehicleId)">轨迹回放</a>
                  <a href="javascript:;" @click.stop="capture(items.vehicleId)" style="margin-left:6px">抓拍</a>
                </Col>
              </Row>
            </div>
          </Card>
           <Card>
            <div>
              <Row>
                <Col span="24">
                  <span style="font-weight:bold">王大</span>
                </Col>
                <Col span="24">
                  <span >压缩车间</span>
                </Col>
                <Col span="24">
                  <span style="font-size: 13px;color: #666;">年龄:<span style="color: #19be6b">22</span></span>
                  <span style="font-size: 13px;color: #666;">&nbsp;上岗时间：<span style="color: #19be6b">09:23分</span></span>
                </Col>
                <Col span="24" class="btnmsg">
                  <a href="javascript:;" @click.stop="gettraces(items.vehicleId)">轨迹回放</a>
                  <a href="javascript:;" @click.stop="capture(items.vehicleId)" style="margin-left:6px">抓拍</a>
                </Col>
              </Row>
            </div>
          </Card>
           <Card>
            <div>
              <Row>
                <Col span="24">
                  <span style="font-weight:bold">王大</span>
                </Col>
                <Col span="24">
                  <span >压缩车间</span>
                </Col>
                <Col span="24">
                  <span style="font-size: 13px;color: #666;">年龄:<span style="color: #19be6b">22</span></span>
                  <span style="font-size: 13px;color: #666;">&nbsp;上岗时间：<span style="color: #19be6b">09:23分</span></span>
                </Col>
                <Col span="24" class="btnmsg">
                  <a href="javascript:;" @click.stop="gettraces(items.vehicleId)">轨迹回放</a>
                  <a href="javascript:;" @click.stop="capture(items.vehicleId)" style="margin-left:6px">抓拍</a>
                </Col>
              </Row>
            </div>
          </Card>
           <Card>
            <div>
              <Row>
                <Col span="24">
                  <span style="font-weight:bold">王大</span>
                </Col>
                <Col span="24">
                  <span >压缩车间</span>
                </Col>
                <Col span="24">
                  <span style="font-size: 13px;color: #666;">年龄:<span style="color: #19be6b">22</span></span>
                  <span style="font-size: 13px;color: #666;">&nbsp;上岗时间：<span style="color: #19be6b">09:23分</span></span>
                </Col>
                <Col span="24" class="btnmsg">
                  <a href="javascript:;" @click.stop="gettraces(items.vehicleId)">轨迹回放</a>
                  <a href="javascript:;" @click.stop="capture(items.vehicleId)" style="margin-left:6px">抓拍</a>
                </Col>
              </Row>
            </div>
          </Card>
        </Row>
      </div>
      <div class="deploy_sy"  @click="intent_sy">
        <Icon :type="!isSubShow? 'chevron-right': 'chevron-left'" size="20"></Icon>
      </div>
      <!--分页-->
      <Row class="pages">
        <Page class="sy_pages" size="small" :total="22" ></Page>
      </Row>
    </Row>
    <!--搜索框-->
    <Row :class="{search: isActive, flow: isSubShow}">
      <Input v-model="serach_sy"  placeholder="请输入您要搜索的内容如(司机,洒水,设备号,车牌号)">
        <Button slot="append"  icon="search" ></Button>
      </Input>
    </Row>
  </div>
</template>

<script>
import {msgnum, getparking, addwarter,
        getwordsearch, gettrace, getcapture, spot} from 'config/api';
export default {
  data () {
    return {
      type: '1,2',  //  洒水作业
      worktypeobj: [
        {
          name: '机械车间',
          id: '2'
        },
        {
          name: '工业车间',
          id: '1'
        },
        {
          name: '化工车间',
          id: '1,2'
        }
      ],
      modes: '',  //  洒水作业
      worktypeobjs: [
        {
          name: '前台',
          id: '2'
        },
        {
          name: '机械',
          id: '1'
        },
        {
          name: '化工',
          id: '1,2'
        },
        {
          name: '技术',
          id: '3'
        }
      ],
      isSubShow: true, //  动态class
      isActive: true, //  class改变
      icons: 'ios-arrow-left',  //  展开与收缩图标
      pattern: [],  //  作业模式列表
      disabled: true, //  路线--禁用
      disabled1: true,  //  抓拍--禁用
      mode: '', //  模式默认
      messageNum: '',  // 机械化保洁监控
      infos: '', //  车辆信息数据-右侧定位框
      serach_sy: '', // 搜索内容
      number: 0,
      vehicleTypeId: '',  //  车辆类型api参数id
      cleaning: '0',  //  机械化保洁监控api参数
      isjudge: false, //  分页判断
      line_sy: ['路线'],  //  图层路线默认选中
      zhuapai_sy: [], //  图层抓拍默认不勾选
      local: ['车辆位置'],  //  图层车辆位置 默认选中车辆位置
      total: null, //  分页总数
      flagStop: true, //  停车场
      flagSewage: true, //  排污点
      flagSuction: true, //  吸污点
      flagaddwarter: true, //  加水点
      querys: {  // 车辆类型参数
        orgId: 0,
        workType: 'clean'
      },
      loading: false, //  加载
      listQuery: {  //  根据车辆类型查信息
        orgId: 0, //  token
        pageIndex: 1,  //  当前页数
        pageSize: 10,  //  显示的条数
        keyWords: '', //  搜索内容关键字
        carTypes: `` //  车辆类型 1,2,5,8,21,22,23,24,28,29,30,31,37,38
      }
    };
  },
  watch: {
    cleaning (val, oldval) {
      this.msgnum();
    }
  },
  mounted () {
    this.$nextTick(() => {
      // this.workTypes('1,2');  //  作业类型，默认加载综合
    });
  },
  filters: {
    filterFun (val) {
      return (val.onlineNum / val.totailRoadNum * 100).toFixed(2);
    }
  },
  methods: {
    //  机械化保洁监控
    msgnum () {
      msgnum(this.cleaning).then((res) => {
        this.messageNum = res.data.data;
      });
    },
    //  轨迹回放
    gettraces (vehicleId) {
      gettrace(vehicleId).then((res) => {
        let datas = res.data.data;
        if (datas.length === 0) {
          this.$Message.error({
            content: '抱歉此车辆不能进行轨迹回放',
            duration: 3
          });
          return false;
        } else {
          this.$emit('gettrace', datas);
        }
      });
    },
    //  点击右侧信息框抓拍
    capture (vehicleId) {
      getcapture(vehicleId).then((res) => {
        let datas = res.data.data;
        if (datas.length === 0) {
          this.$Message.success({
            content: '暂无抓拍数据~',
            duration: 3
          });
        } else {
          this.$emit("captureData", datas);
          this.disabled1 = false; //  如果抓拍数据不为空，取消禁用
          this.zhuapai_sy = ['抓拍']; //  如果抓拍数据不为空，设置默认勾选
        }
      });
    },
    //  点击路线多选框--图层
    channel (e) {
      if (e.length === 0) {
        this.$emit('channelHide', e);
        this.line_sy = [];
        this.mode = '';
      } else {
        this.$emit('channelHide', e);
      }
    },
    //  点击车辆位置--图层
    localcar (e) {
      if (e.length === 1) {
        this.$emit('local', true);
      } else {
        this.$emit('local', false);
      }
    },
    //  点击抓拍多选框--图层
    zhuapai (e) {
      this.$emit('zhuapai', e);
    },
    //  搜索
    search_add () {
      let encryption = encodeURI(this.serach_sy);
      this.listQuery.keyWords = encryption;
      this.listQuery.carTypes = '';
      this.loading = true;
      this.isjudge = true;
      getwordsearch(this.listQuery).then((res) => {
        let datas = res.data.data;
        if (datas.length === 0) {
          this.$Message.error({
            content: '抱歉请输入正确搜索内容',
            duration: 3
          });
          this.loading = false;
          return false;
        } else {
          this.loading = false;
          this.infos = datas;
          this.total = res.data.totalCount;
        }
      });
    },
    //  作业模式--路线
    //  信息框的展开与收起
    intent_sy () {
      this.isSubShow = !this.isSubShow;
    },
    //  停车场--图层
    depot (event) {
      if (this.flagStop === true) {
        getparking().then((res) => {
          let datas = res.data.data;
          for (var key in datas) {
            if (datas.hasOwnProperty(key)) {
              var element = datas[key];
              for (var k in element.potionList) {
                if (element.potionList.hasOwnProperty(k)) {
                  var e = element.potionList[k];
                  this.group.push(e);
                }
              }
            }
            this.$emit('ievent', this.group, element.name, event);
          }
        });
        this.flagStop = false;
      } else {
        this.$emit('ievent', '', '', event);
      }
    },
    //  吸污点--图层
    suction (e) {
      if (e.length !== 0 && this.flagSuction === true) {
        let id = 34;
        spot(id).then((res) => {
          let datas = res.data.data;
          this.$emit('suction', datas);
        });
        this.flagSuction = false;
      } else {
        this.$emit('suctionHide', e);
      }
    },
    //  加水点--图层
    addwarters (e) {
      if (e.length !== 0 && this.flagaddwarter === true) {
        addwarter().then((res) => {
          let datas = res.data.data;
          this.$emit('addwarters', datas);
        });
        this.flagaddwarter = false;
      } else {
        this.$emit('addwarterHide', e);
      }
    },
    //  排污点--图层
    sewage (e) {
      if (e.length !== 0 && this.flagSewage === true) {
        let id = 35;
        spot(id).then((res) => {
          let datas = res.data.data;
          //  如果返回的数据是空的，提示
          if (datas.length !== 0) {
            this.$emit('sewage', datas);
          } else {
            this.$Message.success({
              content: '排污点数据为空~',
              duration: 3
            });
          }
        });
        this.flagSewage = false;
      } else {
        this.$emit('sewageHide', e);
      }
    },
    //  右侧定位框点击事件，将车辆所有信息(item)传到父组件animats函数
    links () {
      let items = [{
        longitude: 111.13111,
        latitude: 39.920677
      }];
      this.$emit('linkages', items[0]);
    }
  }
};
</script>
<style>
[v-cloak] {
  display: none;
} 
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
  from { transform: rotate(0deg);}
  50%  { transform: rotate(180deg);}
  to    { transform: rotate(360deg);}
}
</style>

